<template>
  <div>
    <v-sheet color="primary" tile dark>
      <v-container>
        <v-row justify="center" class="text-center my-12 py-12">
          <v-col cols="12">
            <h1 class="text-h2 font-weight-bold" style="line-height: 1.3;">
             发展计划
            </h1>

            <h3 class="my-6 text-h6 font-weight-regular">
             如果你也想拥有一个本网站，或者参与返利，不妨聊聊
            </h3>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>

    <v-sheet tile>
      <v-container>
        <v-row style="margin-top: -60px" justify="center">
          <v-col
            cols="12"
            md="6"
            xl="4"
            v-for="(item, i) in [
              ...aboutCard.data,
             
            ]"
            :key="i"
          >
            <v-card outlined class="pa-6 fill-height">
              <v-card-title>
                <h2 class="text-h4 font-weight-bold">
                  {{ item.title }}
                </h2>
              </v-card-title>

              <v-card-text>
                <div class="subtitle-1">
                  {{ item.desc }}
                </div>

                <div
                  class="d-flex align-center my-2 subtitle-1"
                  v-for="(d, i) in item.details"
                  :key="i"
                >
                  <div>
                    <v-icon class="mr-2" color="success">
                      mdi-check-circle-outline
                    </v-icon>
                  </div>

                  <div>
                    {{ d.text }}
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>

    <v-sheet tile class="py-12">
      <v-container>
        <div class="text-center">
          <h2 class="text-h2">
           一周之内部署你自己的计算中心
          </h2>

          <h4 class="text-h6 my-6">
           当你获得资格时，你可以在任意时间部署你自己的计算中心
          </h4>
        </div>

        <div class="mt-12">
          <v-timeline>
            <v-timeline-item
              v-for="n in datc"
              :key="n.id"
              large
              color="#f4f6fc"
              fill-dot
            >
              <template v-slot:icon>
                <v-avatar>
                  {{ n.id }}
                </v-avatar>
              </template>
              <v-card outlined color="#f4f6fc">
                <v-card-title class="headline">
                  {{n.title}}
                </v-card-title>
                <v-card-text>
                 {{n.text}}
                </v-card-text>
              </v-card>
            </v-timeline-item>
          </v-timeline>
        </div>
      </v-container>
    </v-sheet>

    <!-- <v-sheet tile class="pb-12">
      <v-container>
        <v-divider class="my-12" />

        <v-row>
          <v-col cols="12" md="6" v-for="item in 4" :key="item">
            <Review />
          </v-col>
        </v-row>

        <div class="text-center mt-6">
          <v-btn color="primary" large class="text-capitalize">
            <v-icon left>mdi-book</v-icon>
            See all stories
          </v-btn>
        </div>
      </v-container>
    </v-sheet> -->
  </div>
</template>

<script>
// import Review from "@/components/review.vue";

export default {
  // components: {
  //   Review,
  // },
  data: () => ({
    datc:[{
      id:1,
 title:'域名',
  text:'你需要单独购买属于你自己的域名'
    },
    {
      id:2,
 title:'服务器',
  text:'你需要单独购买属于你自己的服务器'
    },
    {
      id:3,
 title:'统计程序',
  text:'你需要单独向本站购买统计程序'
    },
    {
      id:4,
 title:'上线',
  text:'本站会帮助你将自己的计算中心部署上线'
    },
    ]
     



    
    
    ,
    aboutCard: {
      data: [
        {
          title: "提出申请",
          desc: "需要满足以下3点",
          details: [
            {
              text: "提出合理的程序购买方案或合作模式",
            },
            {
              text: "不得含有违规行为",
            },
            {
              text: "与已获得合作资格的用户不得处于同一地域",
            },
          ],
        },
        //  {
        //   title: "审核",
        //   desc: "全部由Vallis",
        //   details: [
        //     {
        //       text: "为期3个工作日的人工审核",
        //     },
        //     {
        //       text: "Build & grow your affiliate and media partnerships",
        //     },
        //     {
        //       text: "Enhance your display and paid search strategies",
        //     },
        //   ],
        // },
        //  {
        //   title: "发放",
        //   desc: "至少需要有一个",
        //   details: [
        //     {
        //       text: "Uncover the best SEO and content strategies",
        //     },
        //     {
        //       text: "Build & grow your affiliate and media partnerships",
        //     },
        //     {
        //       text: "Enhance your display and paid search strategies",
        //     },
        //   ],
        // },
      ],
    },
  }),
};
</script>
